﻿@page "/sparkline/sparkline-grid"

@using Syncfusion.Blazor.Charts
@using Syncfusion.Blazor.Grids
@using BlazorDemos
@using BlazorSparklineGridData

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates rendering sparklines in data grid component.</p>
</SampleDescription>
<ActionDescription>
   <p>In this example, you can see how to render sparkline inside the data grid component.</p>
   <p>More information about sparkline can be found in this<a target='_blank' href='https://ej2.syncfusion.com/blazor/documentation/sparkline/getting-started'>documentation section</a>.</p>
</ActionDescription>

    <div class="col-lg-12 control-section">
        <div class="content-wrapper">
            <div class="row">
                    <SfGrid DataSource="@gridData" ModelType="@typeof(SparkGridData)" Height="400">
                        <GridColumns>
                            <GridColumn Field='id' HeaderText="ID" TextAlign="TextAlign.Center" Width="160"></GridColumn>
                            <GridColumn Field='name' HeaderText="Name" Width="160"></GridColumn>
                            <GridColumn Field="orderdate" HeaderText="Order Date" TextAlign="TextAlign.Center" Width="160" Format="yMd"></GridColumn>
                            <GridColumn Field="shipcountry" HeaderText="Ship Country" TextAlign="TextAlign.Center" Width="160"></GridColumn>
                            <GridColumn HeaderText="Tax per annum" TextAlign="TextAlign.Center" Width="160">
                                <Template>
                                    @{
										var data1 = linedata.ElementAt(new Random().Next(0, linedata.Count - 1)).Cast<object>();
                                        <div style="width:100px">
                                            <SfSparkline DataSource="@data1" ValueType="SparklineValueType.Numeric"
                                                          LineWidth="2" Type="SparklineType.Line"
                                                          Fill="#3C78EF" Width="90%" Height="50px">
                                            </SfSparkline>
                                        </div>
                                        lineDataIndex++;
                                    }
                                </Template>
                            </GridColumn>
                            <GridColumn HeaderText="One Day Index" TextAlign="TextAlign.Center" Width="150">
                                <Template>
                                    @{
                                        var data2 = coloumndata.ElementAt(new Random().Next(0, coloumndata.Count - 1)).Cast<object>();
                                        <div style="width:100px">
                                            <SfSparkline DataSource="@data2" ValueType="SparklineValueType.Numeric"
                                                          Type="SparklineType.Column"
                                                          Fill="#3C78EF" Width="90%" NegativePointColor="#f7a816" Height="50px">
                                            </SfSparkline>
                                        </div>
                                            coloumnDataIndex++;
                                    }
                                </Template>
                            </GridColumn>
                            <GridColumn HeaderText="Year GR" TextAlign="TextAlign.Center" Width="150">
                                <Template>
                                    @{
                                        var data3 = coloumndata.ElementAt(new Random().Next(0, coloumndata.Count - 1)).Cast<object>();
                                        <div style="width:100px">
                                            <SfSparkline DataSource="@data3" ValueType="SparklineValueType.Numeric"
                                                          Type="SparklineType.WinLoss"
                                                          Fill="#3C78EF" Width="90%" NegativePointColor="#f7a816" TiePointColor="darkgray" Height="50px">
                                            </SfSparkline>
                                        </div>
                                            winLossDataIndex++;
                                    }
                                </Template>
                            </GridColumn>							
                        </GridColumns>
                    </SfGrid>
            </div>
        </div>
    </div>
@code {
	private int lineDataIndex = 0;
	private int coloumnDataIndex = 0;
	private int winLossDataIndex = 0;
	private List<SparklineGridData> gridData { get; set; }
	private List<double[]> linedata = new List<double[]>
		{
			new double[]{ 0, 6, 4, 1, 3, 2, 5 },
			new double[]{ 5, 4, 6, 3, 1, 2, 0 },
			new double[]{6, 4, 0, 3, 2, 5, 1},
			new double[]{4, 6, 3, 0, 1, 2, 5 },
			new double[]{3, 5, 6, 4, 0, 1, 2 },
			new double[]{1, 3, 4, 2, 5, 0, 6 },
			new double[]{2, 4, 0, 3, 5, 6, 1 },
			new double[]{5, 4, 6, 3, 1, 2, 0 },
			new double[]{0, 6, 4, 1, 3, 2, 5 },
			new double[]{6, 4, 0, 3, 2, 5, 1 },
			new double[]{4, 6, 3, 0, 1, 2, 5 },
			new double[]{3, 5, 6, 4, 0, 1, 2 },
			new double[]{1, 3, 4, 2, 5, 0, 6 },
			new double[]{2, 4, 0, 3, 5, 6, 1 },
			new double[]{5, 4, 6, 3, 1, 2, 0 },
			new double[]{0, 6, 4, 1, 3, 2, 5 },
			new double[]{6, 4, 0, 3, 2, 5, 1 },
			new double[]{4, 6, 3, 0, 1, 2, 5 },
			new double[]{2, 4, 0, 3, 5, 6, 1 },
			new double[]{3, 5, 6, 4, 0, 1, 2 },
			new double[]{1, 3, 4, 2, 5, 0, 6 }
		};
	private List<double[]> coloumndata = new List<double[]>
		{
			new double[]{0, 6, -4, 1, -3, 2, 5 },
			new double[]{5, -4, 6, 3, -1, 2, 0 },
			new double[]{6, 4, 0, 3, -2, 5, 1 },
			new double[]{4, -6, 3, 0, 1, -2, 5 },
			new double[]{3, 5, -6, -4, 0, 1, 2 },
			new double[]{1, -3, 4, -2, 5, 0, 6 },
			new double[]{2, 4, 0, -3, 5, -6, 1 },
			new double[]{5, 4, -6, 3, 1, -2, 0 },
			new double[]{0, -6, 4, 1, -3, 2, 5 },
			new double[]{6, 4, 0, -3, 2, -5, 1 },
			new double[]{4, 6, -3, 0, 1, 2, 5 },
			new double[]{3, -5, -6, 4, 0, 1, 2 },
			new double[]{1, 3, -4, -2, 5, 0, 6 },
			new double[]{2, -4, 0, -3, 5, 6, 1 },
			new double[]{5, 4, -6, 3, 1, -2, 0 },
			new double[]{0, 6, 4, -1, -3, 2, 5 },
			new double[]{6, -4, 0, -3, 2, 5, 1 },
			new double[]{4, 6, -3, 0, -1, 2, 5 },
			new double[]{6, 4, 0, -3, 2, -5, 1 },
			new double[]{3, 5, 6, -4, 0, 1, 2 },
			new double[]{1, 3, -4, 2, -5, 0, 6 }
		};


	protected override void OnInitialized()
	{
		gridData = SparklineGridData.GetAllRecords();
	}
}